<template>
  <div>
    <div>
      <van-nav-bar title="冰箱" left-arrow @click-left="hao">
        <template #right>
          <van-icon name="ellipsis" />
        </template>
      </van-nav-bar>
    </div>
    <div class="my_ribox">
      <div>
        <span>耗电</span>
      </div>
      <div class="my_tong1">
        <div>统计</div>
        <div class="my_riqi">
          <div>
            <van-icon name="tosend" />
            <span> 按日</span>
          </div>
          <div>
            <span>
              <van-icon name="arrow-down" :value="date" @click="show = true" />
            </span>
          </div>
          <div>
            <van-calendar v-model:show="show" @confirm="onConfirm" />
          </div>
        </div>
      </div>
      <div>
        <div class="my_shan">
          <div class="my_shanfont">
            <span class="iconfont icon-shandian"></span>
          </div>
          <div class="my_shantit">
            <span>375kWh</span>
            <p>今日用电量</p>
          </div>
        </div>
        <div ref="barChart" :style="{ width: '110x', height: '250px' }"></div>
      </div>
      <div>
        <div class="my_gong">
          功率
        </div>
        <div class="my_ko">
          <div class="my_ko1">
            <div class="my_two1">
              <div class="my_two">2</div>
            </div>
            <div class="my_twocont">
              <div>
                <span class="iconfont icon-fengshan my_twofont"></span>
              </div>
              <div class="my_twocont1">
                <div class="my-span">
                  <span>客厅</span>
                </div>
                <div class="my_p">
                  <p>消耗30kWh</p>
                  <p>32元</p>
                </div>
              </div>
            </div>
          </div>
          <div class="my_ko2">
            <div><van-switch v-model="checked1" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            <div class="my_righttwo">
              <div>
                <span class="iconfont icon-deng my_twofont"></span>
              </div>
              <div>
                <span class="my-span">厨房</span>
                <p class="my_p">32元</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import router from '@/router';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const checked1 = ref()

const date = ref('');

const show = ref(false);


const formatDate = (date: any) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (value: any) => {
  show.value = false;
  date.value = formatDate(value);
};


const hao = () => {
  router.push('./icebox')
}

const barChart = ref<HTMLElement>();
const myChart1 = ref<any>();
// 绘制柱形图
function initBarEcharts() {
  myChart1.value = echarts.init(barChart.value!);
  myChart1.value.setOption({
    title: {

      x: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {

      orient: 'vertical',
      right: 60,
      top: 20
    },
    xAxis: {
      data: [23, 24, 25, 26, 27, 28, 29, 30, 31],
      axisTick: {
        show: false // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false, // 不显示坐标轴线
      },

    },
    yAxis: {
      show: false,

    },
    color: ['#c38bef', '#6dbcf7'],
    series: [
      {
        type: 'bar',
        data: [23, 24, 18, 25, 27, 28, 25, 15, 30]
      },

    ],
    grid: {
      top: 100,
      x: 0,
      x2: 0,
      y2: 30,
    },

  });
}
onMounted(() => {
  initBarEcharts();
});
</script>
<style scoped lang="scss">
.my_ribox {
  padding: 1rem;

  .my_tong1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .my_riqi {
      width: 10.8rem;
      height: 3.4rem;
      border-radius: 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #f1efef;
      color: #352C5D;
    }
  }

  .my_shan {
    display: flex;

    .my_shanfont {
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      background-color: #FB8F66;
      color: #FFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .my_shantit {
      margin-left: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }


}

.my_ko {
  display: flex;
  justify-content: space-around;

  .my_ko1:hover {
    background-color: #352C5D;
    color: #F6F5FA;
  }

  .my_ko2:hover {
    background-color: #352C5D;
    color: #F6F5FA;
  }


  .my_ko1 {
    width: 15.1rem;
    height: 22.8rem;
    background-color: #F6F5FA;
    border-radius: 2rem;

    .my_two1 {
      display: flex;
      justify-content: flex-end;

      .my_two {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: #FB8F66;
        color: #FFFF;
        text-align: center;
        line-height: 2rem;
        margin-top: 1rem;
        margin-right: 1rem;
      }

    }

    .my_twocont {
      margin-top: 5rem;

      .my_twofont {
        font-size: 5rem;
      }

      .my_twocont1 {
        line-height: 2.5rem;

        .my-span {
          margin-left: 1rem;
        }

        .my_p {
          color: #ABA3CF;
          font-size: 1.2rem;
          margin-left: 1rem;
        }
      }
    }
  }

  .my_ko2 {
    width: 15.1rem;
    height: 22.8rem;
    background-color: #F6F5FA;
    border-radius: 2rem;

    .my_righttwo {
      margin-top: 5rem;
      line-height: 4rem;

      .my_twofont {
        font-size: 5rem;
      }

      .my-span {
        margin-left: 1rem;
      }

      .my_p {
        color: #ABA3CF;
        font-size: 1.2rem;
        margin-left: 1rem;
      }
    }



  }
}
</style>